<template>

  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!--  新增试题  -->
        <div class="NewQuestion">
          <el-row type="flex">
            <el-col><span
                style="font-size: 12px; color:pink">说明：目前学科支持和关键字条件筛选</span>
            </el-col>
            <el-col>
              <el-row
                type="flex"
                justify="end"
              >
                <el-button
                  @click="$router.push('/questions/new')"
                  type="success"
                  size="small"
                > <i class="el-icon-edit"></i> 新增试题
                </el-button>
              </el-row>
            </el-col>

          </el-row>
        </div>
        <!-- 新增试题 -->
        <!-- 表单部分 -->
        <el-form ref="formData">
          <el-row>
            <el-col :span="6">
              <el-form-item
                label="学科"
                label-width="80px"
              >
                <el-select
                  placeholder="请选择"
                  v-model="item.subjectID"
                  @focus="subjects"
                >
                  <el-option
                    v-for="item in subjecList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="二级目录"
                label-width="80px"
              >
                <el-select
                  @focus='directory'
                  placeholder="请选择"
                  v-model="item.catalogID"
                >
                  <el-option
                    v-for="item in directoryLsit"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="标签"
                label-width="80px"
              >
                <el-select
                  @focus="tagsList"
                  v-model="item.tags"
                >
                  <el-option
                    v-for="item in tagsData"
                    :key="item.id"
                    :label="item.tagName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="关键字"
                label-width="80px"
              >
                <el-input
                  v-model="item.keyword"
                  placeholder="根据题干搜索"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item
                label="试题类型"
                label-width="80px"
              >
                <el-select
                  v-model="item.questionType"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in questionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="难度"
                label-width="80px"
              >
                <el-select
                  v-model="item.difficulty"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="方向"
                label-width="80px"
              >
                <el-select
                  v-model="item.direction"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in direction"
                    :key="item.value"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="录入人"
                label-width="80px"
              >
                <el-select v-model="item.creatorID">
                  <el-option
                    v-for="item in userName"
                    :key="item.id"
                    :value="item.id"
                    :label="item.username"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item
                label="题目备注"
                label-width="80px"
              >
                <el-input v-model="item.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="企业简称"
                label-width="80px"
              >
                <el-input
                  v-model="item.shortName"
                  type="text"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-col></el-col>
              <el-col></el-col>
              <el-form-item
                label="城市"
                label-width="80px"
              >

                <el-select
                  style="width:49%"
                  @focus='blurProvince'
                  size="small"
                  v-model="item.province"
                >
                  <el-option
                    v-for="item in provinces"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select
                  style="width:49%"
                  size="small"
                  @focus='blurCity'
                  v-model="item.city"
                >
                  <el-option
                    v-for="item in city"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="80px">
                <el-row
                  type="flex"
                  justify="end"
                >
                  <el-button
                    size="small"
                    @click="btnClear"
                  >清除</el-button>
                  <el-button
                    size="small"
                    type="primary"
                    @click="search"
                  >搜索</el-button>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <!-- 表单部分 jieshu-->
        <!-- 消息提示 -->
        <el-alert
          style="margin-bottom: 15px;"
          show-icon
          :closable='false'
          type="info"
        >
          <span class="el-alert__title">数据共{{counts}}条记录</span>
        </el-alert>
        <!-- 消息提示 -->
        <!-- 表格部分 -->
        <el-table
         :data="tableList">
          <el-table-column
            prop="number"
            min-width="80"
            label="试题编号"
          ></el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            min-widthh="80"
          ></el-table-column>
          <el-table-column
            prop="catalog"
            label="目录"
            min-width="80"
          ></el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            min-width="80"
          ><template slot-scope="{row}">
              <span>{{questionTyp(row.questionType).label}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            label="题干"
            width="280"
          >
            <template slot-scope="{row}">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间"
            width="180"
          ><template slot-scope="{row}">
              <div>{{row.addDate | formatDate('yyyy-MM-dd hh-mm-ss')}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            width="80"
          ><template slot-scope="{row}">
              <span>{{difficultyType(row.difficulty).label}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="creator"
            label="录入人"
            width="80"
          ></el-table-column>
          <el-table-column
            label="操作"
            width="180"
          >
            <template slot-scope="{row}">
              <el-row
                type="flex"
                justify="between-around"
              >
                <el-col>
                  <el-tooltip
                    content="预览"
                    effect="light"
                  >
                    <el-button
                      circle
                      size="small"
                      type="primary"
                      plain
                      icon="el-icon-view"
                      @click="detail(row.id)"
                    ></el-button>
                  </el-tooltip>
                </el-col>
                <el-col>
                  <el-tooltip
                    content="修改"
                    effect="light"
                  >
                    <el-button
                      circle
                      size="small"
                      type="success"
                      plain
                      icon="el-icon-edit"
                      @click="$router.push({path:'/questions/new',query:{id:row.id}})"
                    ></el-button>
                  </el-tooltip>
                  <!-- 两种传传参方式：下面是动态路由传参 上面query传参-->
                  <!-- @click="$router.push(`/questions/new/${row.id}`)" -->
                </el-col>
                <el-col>
                  <el-tooltip
                    content="删除"
                    effect="light"
                  >
                    <el-button
                      circle
                      plain
                      type="danger"
                      size="small"
                      icon="el-icon-delete"
                      @click="remove(row.id)"
                    ></el-button>
                  </el-tooltip>

                </el-col>
                <el-col>
                  <el-tooltip
                    content="加入精选"
                    effect="light"
                  >
                    <el-button
                      circle
                      plain
                      type="warning"
                      size="small"
                      icon="el-icon-check"
                      @click="choiceAdd(row.id)"
                    ></el-button>
                  </el-tooltip>

                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格部分 -->
        <!-- 分页 -->
        <div style="margin-top:15px">
          <el-row
            type="flex"
            justify="end"
          >
            <el-pagination
              @current-change="CurrentChange"
              @size-change="SizePage"
              background
              :current-page.sync="item.page"
              :page-size="item.pagesize"
              layout=" prev, pager, next,sizes ,jumper"
              :total="counts"
              :page-sizes="[2,5,10,30,50]"
            >
            </el-pagination>
          </el-row>
        </div>
      </el-card>
      <!-- 预览界面弹层 -->
      <el-dialog
        v-if="showPreviewDialog"
        :visible="showPreviewDialog"
        title="题目预览"
        @close='btnCancel'
        width="60%"
      >
        <el-row
          type="flex"
          justify="star"
        >
          <el-col :span="6">
            【题型】:{{questionTyp(questionDetail.questionType).label}}
          </el-col>
          <el-col :span="6">【编号】：{{questionDetail.id}}</el-col>
          <el-col :span="6">
            【难度】：{{difficultyType(questionDetail.difficulty).label}}
          </el-col>
          <el-col :span="6">【标签】：{{questionDetail.tags}}</el-col>
        </el-row>
        <el-row
          type="flex"
          justify="star"
        >
          <el-col :span="6">【学科】：{{questionDetail.subjectName}}</el-col>
          <el-col :span="6">【目录】：{{questionDetail.directoryName}}</el-col>
          <el-col :span="6">【方向】：{{questionDetail.direction}}</el-col>
        </el-row>
        <!-- 分割线 -->
        <el-divider></el-divider>
        <!-- 题干部分 -->
        <el-row>【题干】：</el-row>
        <el-row>
          <p v-html="questionDetail.question"></p>
        </el-row>
        <!-- 选择框 -->
        <div>
          <el-row>{{choiceType}}选型：（以下选中的选项为正确答案）</el-row>
          <el-radio-group v-model="radio">
            <div
              v-for="item in options"
              :key="item.id"
              style="margin-top:15px"
            >
              <el-row>
                <el-radio :label="item.isRight">{{item.title}}</el-radio>
              </el-row>
            </div>
            <!-- <div
              v-for="item in options"
              :key="item.id"
            >
              <el-radio
                v-model="radio"
                :label="item.code"
              >{{item.title}}</el-radio>
            </div> -->
          </el-radio-group>
        </div>
        <!-- <el-row>
          <span>【参考答案】：<el-button type="danger">视频答案预览</el-button></span>
        </el-row> -->

        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              【参考答案】：<el-button
                type="danger"
                size="small"
              >视频答案预览</el-button>
            </template>
            <video
              width="50%"
              height="100%"
              :src="questionDetail.videoURL"
              controls
            ></video>
          </el-collapse-item>
        </el-collapse>

        <el-row>
          <span>【答案解析】：<span v-html="questionDetail.answer"></span></span>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <span>【题目备注】：{{questionDetail.remarks}}</span>
        </el-row>
        <template slot="footer">
          <el-button
            type="info"
            size="samll"
            @click="btnCancel"
          >取消</el-button>
        </template>
      </el-dialog>
      <!-- 预览界面弹层 -->
    </div>
  </div>
</template>

<script>
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { simple as subjects } from '@/api/hmmm/subjects.js'
import { simple } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as tagsList } from '@/api/hmmm/tags.js'
import { simple as directoryLsit } from '@/api/hmmm/directorys.js'
export default {
  // 组件名称
  name: 'Question',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      counts: 0, // 总记录数
      citys: [],
      provinces: [], // 城市数据
      questionType, // 试题类型数据
      difficulty: difficulty, // 难度
      direction, // 方向
      userName: [], // 录入人
      radio: 1,
      showPreviewDialog: false,
      item: {
        page: 1,
        pagesize: 2,
        subjectID: '', // 学科id
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简介
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      },
      // 请求获取列表数据
      RequestPage: {
        page: 1,
        pagesize: 5
      },
      subjecList: [], // 学科列表
      directoryLsit: [], // 二级目录列表
      tableList: [], // 表格数据
      // 请求标签业数据
      tagsRequest: {
        page: 1,
        pagesize: 20
      },
      tagsData: [], // 下拉标签
      questionDetail: {}, // 题库详情
      options: [], // 答案
      delID: {
        id: '',
        choiceState: 1
      }
    }
  },
  // 计算属性
  computed: {
    // 判断是单选还是多选
    choiceType () {
      const arr = this.options.filter(item => item.isRight === 1)
      // console.log(arr)
      return arr.length === 1 ? '单选题' : '多选题'
    },
    // 题型
    questionTyp () {
      // const questionTypeId = this.questionDetail.questionType
      // return questionType.find(item => item.value === parseInt(questionTypeId))
      return (val) => questionType.find(item => item.value === parseInt(val))
    },
    // 难度
    difficultyType () {
      return function (id) {
        return difficulty.find(item => item.value === parseInt(id))
      }
    },
    city () {
      return this.citys
    }
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.list() // 渲染表格列表
    this.simple()
    // this.provinces = provinces()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    blurProvince () {
      this.provinces = provinces()
      this.item.city = ''
    },
    blurCity () {
      this.citys = citys(this.item.province)
    },
    // 获取标签列表
    async tagsList () {
      const { data } = await tagsList(this.tagsRequest)
      // console.log(data)
      this.tagsData = data.items
    },
    // 点击搜索
    search () {
      // 调用获取列表方法
      console.log(123)
      this.list()
    },
    btnClear () {
      // 重置表单数据
      console.log(123)
      this.item = {
        page: 1,
        pagesize: 2,
        subjectID: '', // 学科id
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简介
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      }
    },
    // 用户列表
    async simple () {
      const { data } = await simple()
      this.userName = data
      // console.log(data)
    },
    // 学科列表
    async subjects () {
      const { data } = await subjects()
      // console.log(data)
      this.subjecList = data
      this.item.catalogID = ''
    },
    async directory () {
      const { data } = await directoryLsit({ subjectID: this.item.subjectID })
      console.log(data)
      this.directoryLsit = data
    },
    // 获取表格列表
    async list () {
      const data = this.item
      var newData = {}
      for (var k in data) {
        if (data[k] !== '') {
          // console.log('ok')
          newData[k] = data[k]
        }
      }
      // console.log(newData)
      // console.log(data)
      const { data: { counts, items } } = await list(newData)
      this.counts = counts
      this.tableList = items
      // console.log(counts)
    },
    CurrentChange (page) {
      // console.log(page)
      // 重新拉取请求
      this.item.page = page
      // 请求数据
      this.list(this.item)
    },
    SizePage (size) {
      // console.log(size)
      this.item.pagesize = size
      this.list(this.item)
    },
    // 删除操作
    async remove (id) {
      // console.log(id)
      this.delID.id = id
      try {
        // 消息提示
        await this.$confirm('此操作将永久删除，是否继续', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        await remove(this.delID)
        // 重新拉取数据
        this.list()
        this.$message.success('删除成功')
      } catch (error) {
        // this.$message.info('取消删除')
        console.log(error)
      }
    },
    // 加入精选
    async choiceAdd (id) {
      // console.log(id)
      this.delID.id = id
      try {
        // 消息提示
        await this.$confirm('此操作将题目加入精选，是否继续', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        await choiceAdd(this.delID)
        // 重新拉取数据
        this.list()
        this.$message.success('加入成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 题库详情
    async detail (id) {
      this.delID.id = id
      const { data } = await detail(this.delID)
      // console.log(data)
      this.questionDetail = data
      this.options = data.options
      // 显示弹层
      this.showPreviewDialog = true
    },
    btnCancel () {
      this.showPreviewDialog = false
    }

  }
}
</script>
<style >
.NewQuestion {
  margin-bottom: 15px;
}
/* .el-icon-arrow-right:before {
  content: none;
} */
.el-collapse {
  /* margin-bottom: 15px; */
  margin: 15px 0;
}
.el-table__header-wrapper .el-table__header{
  width: 100%;
}

</style>
